<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-27 14:36:05
-->
<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <div
          class="select-group"
          v-for="(item, index) in condition"
          v-show="index!== condition.length - 1"
          :key="index"
        >
          <div class="select-box">
            <el-form-item :label="'条件' + (index + 1)" prop="region">
              <m7Select
                size="mini"
                v-model="item.value"
                :placeholder="'请选择时间条件'"
                filterable
                clearable
                :multiple="false"
                :collapse-tags="false"
                :options="timeConditionList"
                :remote="true"
                :defaultProps="{ label: 'name', value: '_id' }"
                @input="selectChange(item.value, index)"
              >
              </m7Select>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item :label="'节点'" prop="region">
              <el-select
                size="mini"
                v-model="item.to"
                placeholder="请选择下一步节点"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="node in nodeList"
                  :label="node.data.name"
                  :value="node.id"
                  v-show="!node.viewOnly && node.id !== currentData.id"
                  :key="node.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-oprate">
            <span @click="deleteCondition(item, index)"
              ><i class="V7_iconfont V7_iconV7tubiao-109 delete-span"></i
            ></span>
          </div>
        </div>
        <div class="addCondition">
          <span @click="addCondition"
            ><i class="V7_iconfont V7_iconV7tubiao_xinzeng add-span"></i>增加条件</span
          >
        </div>
        <div class="select-group">
          <div class="select-box">
            <el-form-item :label="'默认'">
              <el-select placeholder="其他时间" size="mini" disabled style="width: 100%">
              </el-select>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item :label="'节点'" prop="default">
              <el-select
                size="mini"
                v-model="formData.default"
                placeholder="请选择下一步节点"
                style="width: 100%"
                clearable
                @change='defaultChange'
                filterable
              >
                <el-option
                  v-for="node in nodeList"
                  :label="node.data.name"
                  :value="node.id"
                  v-show="!node.viewOnly && node.id !== currentData.id"
                  :key="node.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-oprate">
            <span><i class="V7_iconfont V7_iconV7tubiao-109 delete-span" style="opacity: 0"></i></span>
          </div>
        </div>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type='danger' size="mini">删除</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'

import remoteSelect from '@/components/configCommon/operate-modules/remoteSearch/index.vue'
import { PagingData } from '../types'

@Component({
  name: 'im-node-date',
  components: { continer, remoteSelect }
})
export default class extends Mixins(nodeEidtMixins) {
  private dateList = []

  private dateRemoteUrl = '/base/action/config/timecondition/query'

  private pagingData: PagingData = {
    limit: 10,
    page: 1
  }

  private query = {}
  private selectChange (id, index): void {
    this.setConditionName(this.timeConditionList, index, '_id', id)
  }

  private setConditionName (dataList, conditionIndex, datakey, value) {
    dataList.some((item) => {
      if (item[datakey] === value) {
        const { nodeId } = item
        this.condition[conditionIndex].customValue = { nodeId }
        this.condition[conditionIndex].label = item.name
        return true
      }
    })
  }

  // private getDateList () {
  //   const actionData = Object.assign({ limit: this.pagingData.limit, page: this.pagingData.page }, this.query)
  //   const data = { url: '/base/action/config/timecondition/query', method: 'POST', data: actionData }
  //   IvrModule.IvrCommonAction(data).then((res: any) => {
  //     this.dateList = res.list
  //   })
  // }

  private addCondition () {
    this.condition.splice(this.condition.length - 2, 0, {
      label: '',
      value: '',
      to: ''
    })
  }

  private defaultChange (value) {
    this.condition[this.condition.length - 1].to = value
  }
}
</script>

<style lang="stylus" scoped>
.select-oprate
  span
    padding-top 36px
    display block
    color $icon-gray
    cursor pointer
.addCondition
  display flex
  align-items center
  color $c-main
  cursor pointer
  margin-bottom 15px
  i
    font-size 12px
.delete-span
  &:hover
    color $c-danger
.add-span
  &:before
    margin-right 4px
</style>
